<template>
  <su-page bg="#f7f7f7">
    <su-body :end="listAllLoaded && listTotal">
      <div class="p10 white-bg">
        <u-search v-model="queryParams.name" placeholder="输入项目名称查询" :showAction="false" @search="reloadlist"></u-search>
      </div>
      <!-- 筛选 -->
      <su-filter-bar stickyTop="0" padding="0 5px">
        <u-tabs :list="tabList" :current="queryParams.category" keyName="name" @change="reloadlist"></u-tabs>
        <view class="su-filter-bar__btn-list" slot="asider">
          <!-- <su-filter-form :options="filterFormOptions" @confirm="filterFormConfirm"></su-filter-form> -->
        </view>
      </su-filter-bar>
      <!-- list -->
      <view  class="p10" v-if="tabList.values(1)">
        <su-grant-card v-for="(item,index) in list" :key="index" :data="item"></su-grant-card>
      </view>
      <!-- loading -->
      <su-list-loading :loading="listLoading" :listLength="list.length"></su-list-loading>
      <!-- 无数据 -->
      <u-empty v-if="listAllLoaded && listTotal==0" class="mt40" mode="data"></u-empty>
    </su-body>
  </su-page>
</template>

<script>
  /**
   * @description 审批
   * @date 2022-03-12
   * @version v1.0.1
   * @author gf
   */

  import {
    mapState
  } from 'vuex'
  import SuGrantCard from './components/su-grant-cardlb.vue'
  import {runSQL} from '@/common/utils/wxutils.js'
  export default {
    components: {
      SuGrantCard
    },
    data() {
      return {
        filterFormOptions: [
          {
            label: '总包单位',
            prop: 'assetCode',
            placeholder: '请输入总包单位搜索',
            defaultValue: '',
            clearable: true,
            type: 'input'
          },
          {
            label: '监理单位',
            prop: 'assetCode',
            placeholder: '请输入监理单位搜索',
            defaultValue: '',
            clearable: true,
            type: 'input'
          },
          {
            label: '时间查询',
            prop: 'createTime',
            placeholder: '请选择时间查询',
            defaultValue: '',
            clearable: true,
            type: 'date'
          },
          {
            label: '状态',
            prop: 'sortId',
            placeholder: '请选择状态筛选',
            defaultValue: '',
            type: 'select',
            clearable: true,
            options: [{
                label: '在建',
                value: '1'
              },
              {
                label: '已承接',
                value: '2'
              },
            ]
          }
        ],
        tabList: [
			// {
   //          value: '1',
   //          name: '在建'
   //        },
   //        {
   //          value: '2',
   //          name: '洽谈中',
   //          badge: {
   //            value: 5,
   //          }
   //        },
   //        {
   //          value: '3',
   //          name: '已承接'
   //        },
   //        {
   //          value: '4',
   //          name: '未承接'
   //        },
   //        {
   //          value: '5',
   //          name: '已结束'
   //        },
        ],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          name: null,
          category: 0,
          key: null,
          tenantId: null,
          deployTime: null,
          derivedFrom: null,
          derivedFromRoot: null,
          parentDeploymentId: null,
          engineVersion: null
        },
        searchKey: '',
        list: [],
        listTotal: 0,
        listAllLoaded: false,
        listLoading: false,
      }
    },
    computed: {
      ...mapState(['token'])
    },
    onLoad(params) {
      this.reloadlist(params.id)
    },
    watch: {
      token(newVal) {
        this.reloadlist()
      }
    },
    methods: {
      // 筛选
      filterFormConfirm(formData){
        this.queryParams = {
          ...this.queryParams,
          ...formData
        }
        this.reloadlist()
      },
      // 新增按钮点击
      createNew(id){
        console.log('新增')
        this.$u.route({
          url:'/pages/main/grant/form/form',
          params:{
            id:id
          }
        })
      },
      //初始化参数，重新加载列表
      reloadlist(stopPullDownRefresh) {
        this.listLoading = false
        this.listAllLoaded = false
        this.list = []
        this.listTotal = 0
        this.queryParams.pageNum = 1
        this.getlist(stopPullDownRefresh)
      },
      //获取列表数据
      getlist(stopPullDownRefresh) {
       let list=[];
       		   runSQL("select uuid,a.gcmc,nd||'-'||yf tbsj,c.xxjd,c.BYYWCCZ,c.BYYSXSS from ssnydw.gcbdxxb a,ssnydw.GCJDMYXXB b,ssnydw.MYJDXXFB c where a.gcbh=b.gcbh and b.recid=c.recid and a.recid="+stopPullDownRefresh+";").then(res=>{
       			   for(let i=0;i<res[0].length;i++){
       			   					list.push({
       			   						    uuid:res[0][i].UUID,
       			   							gcmc:res[0][i].GCMC,
       			   							tbsj:res[0][i].TBSJ,
       			   							xxjd:res[0][i].XXJD,
       			   							byywccz:res[0][i].BYYWCCZ,
       			   							byysxss:res[0][i].BYYSXSS,
       			   					})  
									}
         if (this.listLoading || this.listAllLoaded) return
         this.listLoading = true
         setTimeout(()=>{
           let res = {
             data:{
               records:list, 
               total:5
             }
           }
           this.dataLoadedHandler(res, stopPullDownRefresh)
         },200)
       		
       })
      },
      // 列表请求成功后处理
      dataLoadedHandler(res, stopPullDownRefresh) {
        console.log(res)
        this.listLoading = false
        const resData = res.data || {}
        const pageData = resData.records || []
        this.list = this.list.concat(pageData)
        this.listTotal = resData.total || 0
        if (pageData.length < this.queryParams.pageSize) {
          this.listAllLoaded = true
        } else {
          this.queryParams.pageNum++
        }
        if (stopPullDownRefresh) {
          uni.stopPullDownRefresh()
        }
      },
    },

    onPullDownRefresh() {
      this.queryParams.name = ''
      this.reloadlist(true)
    },
    onReachBottom() {
      console.log('触底')
      this.getlist()
    }
  }
</script>

<style lang="scss">
</style>
